﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="css/applemenu1.css" rel="stylesheet" type="text/css" />
</head>
<body>
        <div class="navigation">
            <ul class="menu" id="menu">
                <li><span class="ipod"></span><a href="" class="first">Players</a></li>
                <li><span class="video_camera"></span><a href="">Cameras</a></li>
                <li><span class="television"></span><a href="">TVs</a></li>
                <li><span class="monitor"></span><a href="">Screens</a></li>
                <li><span class="toolbox"></span><a href="">Tools</a></li>
                <li><span class="telephone"></span><a href="">Phones</a></li>
                <li><span class="print"></span><a href="" class="last">Printers</a></li>
            </ul>
        </div>
    <script src="../common_script/jquery-1.6.2.min.js" type="text/javascript"></script>
        
        <script type="text/javascript">
            $(function () {
                var d = 1000;
                $('#menu span').each(function () {
                    $(this).stop().animate({
                        'top': '-17px'
                    }, d += 250);
                });

                $('#menu > li').hover(
                function () {
                    var $this = $(this);
                    $('a', $this).addClass('hover');
                    $('span', $this).stop().animate({ 'top': '40px' }, 300).css({ 'zIndex': '10' });
                },
                function () {
                    var $this = $(this);
                    $('a', $this).removeClass('hover');
                    $('span', $this).stop().animate({ 'top': '-17px' }, 800).css({ 'zIndex': '-1' });
                }
                
            );
            });
        </script>
</body>
</html>
